{% extends 'base.html' %}

{% block header_content %}
<style>
.center {
 width: auto;
 display: table;
 margin-left: auto;
 margin-right: auto;
}
.text-center > table > tbody > tr > th,
.text-center > table > thead > tr > th {
 text-align: center;
}

.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid #dddddd;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
}
.table-responsive > .table {
margin-bottom: 0;
}

.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap;
}

.NoNewline
{
word-break: keep-all;/*必须*/
white-space: nowrap;
}

/* 设置chosen菜单向上弹出 css样式 */
.chosen-container .chosen-drop {
    border-bottom: 0;
    border-top: 1px solid #aaa;
    top: auto;
    bottom: 40px;
}
</style>
	<!-- Datepicker -->
    <link href="/static/template/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
    <!-- Gritter -->
	<link href="/static/template/css/gritter/jquery.gritter.css" rel="stylesheet">
{% endblock %}


{% block container %}
<div id="main-container">
	<div class="main-header clearfix">
		<div class="page-title">
			<h3 class="no-margin">批处理作业详情 - 执行历史</h3>
		</div><!-- /page-title -->
	</div><!-- /main-header -->


	<div class="padding-md">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <form class="form-horizontal form-border no-margin" id="basic-constraint" data-validate="parsley" novalidate>
                        <div class="panel-heading">
                            Update Batch Job
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                <label class="control-label col-lg-2">任务名称</label>
                                <div class="col-lg-4">
									<p id="name" class="form-control-static"></p>
								</div>
                            </div><!-- /form-group -->
                            <div class="form-group">
                                <label class="control-label col-lg-2">描述</label>
                                <div class="col-lg-4">
									<p id="description" class="form-control-static"></p>
								</div>
                            </div><!-- /form-group -->
                            <div class="form-group">
                                <label class="control-label col-lg-2">触发模式</label>
                                <div class="col-lg-4">
									<p id="trigger_mode" class="form-control-static"></p>
								</div>
                            </div><!-- /form-group -->
                            <div class="form-group">
                                <label class="control-label col-lg-2">执行状态</label>
                                <div class="col-lg-4">
									<p id="status" class="form-control-static"></p>
								</div>
                            </div><!-- /form-group -->
                            <div class="form-group">
                                <label class="control-label col-lg-2">执行结果</label>
                                <div class="col-lg-4">
                                    <span id="result" class="control-label label label-success col-lg-1" style="margin-top: 5px;"></span>
								</div>
                            </div><!-- /form-group -->
                            <div class="form-group">
                                <label class="control-label col-lg-2">开始时间</label>
                                <div class="col-lg-4">
									<p id="start_time" class="form-control-static"></p>
								</div>
                            </div><!-- /form-group -->
                            <div class="form-group">
                                <label class="control-label col-lg-2">结束时间</label>
                                <div class="col-lg-4">
									<p id="end_time" class="form-control-static"></p>
								</div>
                            </div><!-- /form-group -->
                            <div class="form-group">
                                <label class="control-label col-lg-2">作业详情</label>
                                <div class="col-lg-10">
                                     <table class="table table-hover table-bordered NoNewline" id="table"></table>
                                </div><!-- /.col -->
                            </div><!-- /form-group -->
                        </div>
                    </form>
                </div><!-- /panel -->
            </div><!-- /.col-->
        </div><!-- /.row -->
	</div><!-- /padding-md -->
</div><!-- /main-container -->
{% endblock %}

{% block footer_content %}


<!-- Datepicker -->
<script src='/static/template/js/bootstrap-datepicker.js'></script>
<script src='/static/template/js/bootstrap-datepicker.zh-CN.min.js'></script>
<script src="/static/template/js/jquery.gritter.min.js"></script>
<!-- Modernizr -->
{#<script src='/static/template/js/modernizr.min.js'></script>#}
<script>
$(document).ready(function(){
    let index = layer.load();
    InitBatchJobInstanceData();
    InitSubJob();
    layer.close(index);
});


/**
 * 初始化批处理作业数据
 */
function InitBatchJobInstanceData(){
    let url = '/batch_job/get_batch_job_instance_data_by_id/';
    let instance_id = getId();
    let para = {'instance_id': instance_id};
    $.ajax({
		type : "post",
		url : url,
		data : para,
		success : function (jdata) {
			let data = $.parseJSON(jdata);
			$("#name").text(data.name);
			$("#description").text(data.description);
			$("#trigger_mode").text(TriggerModeFormatter(data.trigger_mode));
			$("#status").text(StatusFormatter(data.status));

			let result = ResultFormatter(data.result);
			$("#result").text(result.resultF);
			$("#result").addClass(result.className);

			$("#start_time").text(data.start_time);
			$("#end_time").text(data.end_time);

		}
  	});
}

/**
 * 初始化触发模式
 */
function TriggerModeFormatter(value) {
    let resultF = null;
    switch (Number(value)){
        case 1:
            resultF = '自动';
            break;
        case 2:
            resultF = '手动';
            break;
    }
    return resultF
}


/**
 * 初始化状态
 */
function StatusFormatter(value) {
    let resultF = null;
    switch (Number(value)){
        case 0:
            resultF = '正在执行';
            break;
        case 1:
            resultF = '执行完成';
            break;
    }
    return resultF
}


/**
 * 初始化结果
 */
function ResultFormatter(value) {
    let resultF = null;
    let className = null;
    switch (Number(value)){
        case 0:
            resultF = '成功';
            className = 'label-success';
            break;
        case 1:
            resultF = '失败';
            className = 'label-danger';
            break;
        case 2:
            resultF = '未知';
            className = 'label-info';
            break;
    }
    return {'resultF': resultF, 'className': className}
}


/**
 * 初始化子作业
 */
function InitSubJob() {
    let url = '/batch_job/get_batch_job_sub_job_by_id/';
    let _id = getId();
    let para = {'_id': _id};
    $.ajax({
		type : "post",
		url : url,
		data : para,
		success : function (jdata) {
			let data = $.parseJSON(jdata);
            $("#table").bootstrapTable('append', data);
		}
  	});
}


/*
*初始化批处理作业详情表格
*/
$('#table').bootstrapTable({
    url: '/batch_job/get_batch_job_sub_job_instance_data_by_id/',
    pagination: true,                   //是否显示分页（*）
    sortable: false,                     //是否启用排序
    sortOrder: "asc",                   //排序方式
    showColumns: true,
    showRefresh: true,
    queryParams: queryParams,           //传递参数（*）
    sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
    pageNumber: 1,                       //初始化加载第一页，默认第一页
    pageSize: 10,                       //每页的记录行数（*）
    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
    search: true,                  //是否显示搜索 --前端搜索
    columns:get_columns()
});


/*
*得到查询的参数
*/
function queryParams(params) {
    return {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        limit: params.limit,   //页面大小
        offset: params.offset,  //页码
        instance_id: getId(),
        name: $('#name').val(),
        description: $('#description').val(),
        result: $('#result').val(),
        trigger_mode: $('#trigger_mode').val(),
    };
}


/*
*获取bootstraptable 的列columns
*/
function get_columns() {
    return [{
            field: 'checkbox',
            checkbox: true,
        },{
            title: '序号',//标题  可不加
            formatter: function (value, row, index) {
                return index+1;
                }
        }, {
            field: 'subjob_id',
            title: 'ID',
            visible: false
        }, {
            field: 'name',
            title: '任务名称',
            formatter: subjectFormatter
        }, {
            field: 'description',
            title: '描述 '
        }, {
            field: 'type',
            title: '类型',
            formatter: typeFormatter
        }, {
            field: 'trigger_mode',
            title: '触发模式',
            formatter: triggerModeFormatter
        }, {
            field: 'status',
            title: '执行状态',
            formatter: statusFormatter
        }, {
            field: 'result',
            title: '执行结果',
            formatter: resultFormatter
        }, {
            field: 'start_time',
            title: '开始时间',
        }, {
            field: 'end_time',
            title: '结束时间',
    }];
}


/*
* 超链接显示
* 子作业扩展后，需要根据子作业类型生成url
*/
function subjectFormatter(value, row, index) {
    let url = "/datax_web/monitor_job_detail/" + row.subjob_instance_id;
    return [
        '<div><a target="_black" class="mod" href='+ url +'>',
        value,
        '</a></div>'
    ].join('');
}


/*
*格式化执行结果
*/
function typeFormatter(value, row, index) {
    let resultF = null;
    let className = null;
    switch (Number(value)){
        case 1:
            resultF = '数据同步';
            className = '';
            break;
        case 2:
            resultF = 'SQL脚本';
            className = 'label-danger';
            break;
        case 3:
            resultF = '备份';
            className = 'label-info';
            break;
    }
    return '<span class="label ' + className + '">' + resultF + '</span>'
}


/*
*格式化执行结果
*/
function resultFormatter(value, row, index) {
    switch (Number(value)){
        case 0:
            var resultF = '成功';
            var className = 'label-success';
            break;
        case 1:
            var resultF = '失败';
            className = 'label-danger';
            break;
        case 2:
            resultF = '';
            className = 'label-info';
            break;
    }
    return '<span class="label ' + className + '">' + resultF + '</span>'
}


/*
*格式化执行状态
*/
function statusFormatter(value, row, index) {
    switch (Number(value)){
        case 0:
            var resultF = '正在执行';
            var className = '';
            break;
        case 1:
            var resultF = '执行完成';
            className = '';
            break;
    }
    return '<span class="label ' + className + '">' + resultF + '</span>'
}


/*
*格式化触发模式
*/
function triggerModeFormatter(value, row, index) {
    switch (Number(value)){
        case 1:
            var resultF = '自动';
            var className = '';
            break;
        case 2:
            var resultF = '手动';
            className = '';
            break;
    }
    return '<span class="label ' + className + '">' + resultF + '</span>'
}


/**
 * 获取URL后面的ID
 * return: _id
 */
function getId() {
    let str=location.href;
    let args = str.split('/');
    return args[args.length-2];
}

/*
*ajax get callback
*/
function ajax_callback1(msg){
    let index = layer.alert(msg, {
        skin: 'layui-layer-molv' //样式类名
    },function(){
       layer.close(index)
    });
}


/*
*ajax get callback2
*/
function ajax_callback2(msg, url){
    let index = layer.alert(msg, {
        skin: 'layui-layer-molv' //样式类名
    },function(){
        layer.close(index);
        window.location=url;
    });
}
</script>
{% endblock %}